<template>
  <div class="tw-container tw-mx-auto tw-p-4">
    <!-- 头部：暗黑模式下背景和文字切换 -->
    <header class="card tw-mb-6">
      <h1 class="tw-text-2xl tw-font-bold dark:tw-text-white">首页标题</h1>
      <p class="tw-mt-2 tw-text-gray-600 dark:tw-text-dark-lightText">
        暗黑模式示例页面，切换后整体样式统一变化
      </p>
    </header>

    <!-- 内容区：按钮和表单适配 -->
    <main class="card tw-mb-6">
      <div class="tw-mb-4">
        <label class="tw-block tw-mb-2">输入框示例</label>
        <input
          type="text"
          placeholder="请输入内容"
          class="tw-w-full tw-p-2 tw-border tw-border-[var(--tw-border-primary)] tw-rounded tw-bg-white dark:tw-bg-dark-card dark:tw-text-white"
        />
      </div>

      <button class="tw-p-2 tw-rounded tw-bg-primary dark:tw-bg-blue-600 tw-text-white">
        操作按钮
      </button>
    </main>

    <!-- 底部：辅助文字适配 -->
    <footer class="tw-text-sm tw-text-gray-500 dark:tw-text-dark-lightText">
      © 2025 暗黑模式示例项目
    </footer>
  </div>
</template>
